@import './mixins.styl'
.todo-item {
  width: 92%;
  display: flex;
  margin: 6px auto;
  justify-content: space-between;
  padding: 10px;
  border: 2px solid rgba(182, 208, 198, 0.3);
  font-size: 26px;
  height: 40px;
  background-color: rgba(245, 249, 249, 0.66);
  border-radius: 16px;
  transition: all 200ms ease-in-out;

  input[type='checkbox'] {
    clearDefault()
    width: 40px;
    height: 40px;
    scale: 0.85;
    cursor: pointer;
    position: relative
    top: -2px
    &::after {
      content: url('assets/images/unchecked.svg');
    }
    &:checked::after {
      content: url('assets/images/checked.svg');
    }
  }
  .content {
    clearDefault()
    flex: 3;
    height: 40px;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 40px;
    font-family: Century, '楷体';
    color: #494b4b;
    font-size: 26px;
    text-overflow: ellipsis;
    // 超出不换行
    white-space:nowrap
    //超出隐藏
    overflow: hidden;
    background: none;
    // 禁止选中
    user-select:none
    /* // 禁止点击
    pointer-events: none; */
    &:focus {
      outline: 2px solid rgb(77, 234, 11);
      box-shadow: 1px 1px 3px #1ec42f;
      border-radius: 12px;
      background-color: rgb(244, 249, 249);
    }
  }
  // 添加删除线
  .completed-content {
    text-decoration: line-through;
    color: grey;
    // 已完成禁止鼠标点击
    pointer-events: none;
  }

  .created_time {
    flex: 1.5;
    font-size: 16px;
    font-family: Century;
    line-height: 40px;
    color: grey;
    // 禁止选中
    user-select:none
  }

  button {
    clearDefault()
    width: 40px;
    height: 40px;
    background-color: transparent;
    cursor: pointer;
    scale: 0.9;
  }

  &:hover {
    box-shadow: 1px 1px 6px #1ec42f;
    scale: 1.007;
    transition: all 200ms ease-in-out;

    button::after {
      content: url('assets/images/delete.svg');
    }
  }
}
//添加完成动画
.completed {
  transform: rotateX(360deg);
}

// 添加删除动画
.fade-enter-active, .fade-leave-active {
  transition: all 396ms !important
  transform: scale(0.1,0.1)
  opacity: 0,
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}